const compileUtil = {
    getVal(expr, vm) {
        //expr为msg person.fav 
        //['msg']['person','fav'][person,habit,a]
        var current = expr.split('.')
        return current.reduce((data, currentVal) => {   //data必需。初始值或者计算结束后的返回值。   currentVal必需。当前元素
            return data[currentVal]   //同一数组 person和habit返回对象替换data的值  所有可以深度递归
        }, vm.$data)   
        //vm.$data 可选。传递给函数的初始值
    },
    // 视图=>数据=>视图 设置值
    setVal(expr,vm,inputVal){
        let i = 0
        arr = expr.split('.')
        arr.reduce((data, currentVal) => {
            if (arr.length - 1 == i) {
                data[currentVal] = inputVal
            }
            i++
            return data[currentVal]
        }, vm.$data)
    },
    // {{}}值变化后 获取新的值
    getContentVal(expr,vm){
        return expr.replace(/\{\{(.+?)\}\}/g,(...args) => {
            return this.getVal(args[1],vm)
        })
    },
    text(node, expr, vm) { //{{}}--{{}} 与 person.fav 
        let value;
        if(expr.indexOf('{{') !== -1){
            value = expr.replace(/\{\{(.+?)\}\}/g,(...args) => {
                new Watcher( vm, args[1], ()=>{     
                    this.updater.textUpdater(node, this.getContentVal(expr,vm))
                });  
                return this.getVal(args[1],vm)
            })
        }else{
        value = this.getVal(expr, vm);  //const value = vm.$data[expr];
        new Watcher( vm, expr, (newVal)=>{      
            this.updater.textUpdater(node, newVal)
        });  
        }
        this.updater.textUpdater(node, value)        
    },
    html(node, expr, vm) {
        const value = this.getVal(expr, vm);
        this.updater.htmlUpdater(node, value)      
        new Watcher( vm, expr, (newVal)=>{            
            this.updater.htmlUpdater(node, newVal)   //第一步编译的时候cb是没有执行的 只是watcher把自己放入对应的dep中 并保存了旧值
        });                                          //修改值之后会调用dep.notify后 执行update里的cb回调函数  此时这里的this.updater.htmlUpdater(node, newVal)才执行  
    },
    model(node, expr, vm) {
        const value = this.getVal(expr, vm);
        this.updater.modelUpdater(node, value);
        //绑定更新函数 数据=>视图
        new Watcher( vm, expr, (newVal)=>{        
            this.updater.modelUpdater(node, newVal)
        });                                       
        //视图=>数据=>视图
        node.addEventListener('input',(e)=>{
            //设置值
           this.setVal(expr,vm,e.target.value);    
        })
    },
    on(node, expr, vm, eventName) {
        let fn = vm.$options.methods && vm.$options.methods[expr];
        node.addEventListener(eventName,fn.bind(vm),false)                                   
    },
    // 更新的函数
    updater: {
        modelUpdater(node, value) {
            node.value = value;
        },
        htmlUpdater(node, value) {
            node.innerHTML = value;
        },
        textUpdater(node, value) {
            node.textContent = value;
        }
    }
}

//指令解析器
class Compile {
    constructor(el, vm) {
        this.el = this.isElementNode(el) ? el : document.querySelector(el);
        this.vm = vm;
        // 1获取文档碎片对象 放入内存中会减少页面的回流和重绘
        const fragment = this.node2Fragment(this.el);
        // 2编译模板
        this.compile(fragment);
        // 3追加子元素到根元素
        this.el.appendChild(fragment);   //fragment不能展开 因为被追加到了el上

    }
    //编译模板
    compile(fragment) {
        // 1获取子节点
        const childNodes = fragment.childNodes;
        [...childNodes].forEach((child) => {
            if (this.isElementNode(child)) {
                // 是元素节点
                // 编译元素节点
                // console.log("元素节点", child);
                this.compileElement(child);
            } else {
                // 文本节点
                // 编译文本节点
                // console.log("文本节点", child);
                this.compileText(child);
            }
            if (child.childNodes && child.childNodes.length) {
                this.compile(child);
            }
        });
    }
    // 编译元素节点
    compileElement(node) {
        // console.log('元素节点',node);
        // <div v-text='msg'></div>
        const attributes = node.attributes;
        [...attributes].forEach(attr => {
            const { name, value } = attr;
            if (this.isDirective(name)) { //是一个指令 v-text v-html v-model v-on:click
                const [, directive] = name.split('-'); //directive：text html model on:click
                const [dirName, eventName] = directive.split(':'); //dirName: text html model on
                //更新数据 数据驱动视图 node元素节点 value为msg  eventName为click
                compileUtil[dirName](node,value,this.vm,eventName);
                //删除有指令的标签上的属性
                node.removeAttribute('v-'+ directive)
            }else if(this.isElementName(name)){   //@click='handClick'
                const [, eventName] = name.split('@');
                compileUtil['on'](node,value,this.vm,eventName);
            }
        })
    }
    // 编译文本节点
    compileText(node) {
        // console.log("文本节点", node);
        //{{}} 
        const content = node.textContent;
        if(/\{\{.+?\}\}/.test(content)){
            compileUtil['text'](node,content,this.vm)
        }
    }
     isElementName(attrName){
        return attrName.startsWith('@');
     }
     isDirective(attrName){
         return attrName.startsWith('v-');
    }

    //获取文档碎片
    node2Fragment(el) {
        // 创建文档碎片
        const f = document.createDocumentFragment();
        let firstChild;  //这里有个循环 如果存在firstChild就遍历 最后f保存了所有的子节点
        while (firstChild = el.firstChild) {
           f.appendChild(firstChild);
        }
        // console.log(f)
        return f;
    }
    //判断元素节点对象
    isElementNode(node) {
        return node.nodeType === 1;
    }
}

class MVue {
    constructor(options) {
        this.$el = options.el;
        this.$data = options.data;
        this.$options = options;
        if (this.$el) {
            //1 实现一个数据观察者
            new Observer(this.$data)
            //2 实现一个指令解析器
            new Compile(this.$el, this);

            //代理
            this.proxyData(this.$data)
        }
    }
    proxyData(data){
        for(const key in data){
            Object.defineProperty(this,key,{
                get(){
                    return data[key];
                },
                set(newVal){
                    data[key] = newVal;
                }
            })
            
        }
    }
}

